<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <link rel="icon" href="/favicon.ico"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>One Doc</title>
    <style>
        @media only screen and (max-width: 768px) {
            .hidden-xs-only {
                display: none !important
            }
        }

        @media only screen and (min-width: 768px) {
            .hidden-sm-and-up {
                display: none !important
            }
        }

        @media only screen and (min-width: 768px) and (max-width: 992px) {
            .hidden-sm-only {
                display: none !important
            }
        }

        @media only screen and (max-width: 992px) {
            .hidden-sm-and-down {
                display: none !important
            }
        }

        @media only screen and (min-width: 992px) {
            .hidden-md-and-up {
                display: none !important
            }
        }

        @media only screen and (min-width: 992px) and (max-width: 1200px) {
            .hidden-md-only {
                display: none !important
            }
        }

        @media only screen and (max-width: 1200px) {
            .hidden-md-and-down {
                display: none !important
            }
        }

        @media only screen and (min-width: 1200px) {
            .hidden-lg-and-up {
                display: none !important
            }
        }

        @media only screen and (min-width: 1200px) and (max-width: 1920px) {
            .hidden-lg-only {
                display: none !important
            }
        }

        @media only screen and (max-width: 1920px) {
            .hidden-lg-and-down {
                display: none !important
            }
        }

        @media only screen and (min-width: 1920px) {
            .hidden-xl-only {
                display: none !important
            }
        }

        body[arco-theme='dark'] *{
            color: deepskyblue;
        }

        body[arco-theme='dark'] canvas, body[arco-theme='dark'] img{
            filter: invert(1);
        }

        .canvasWrapper {
            box-shadow: 0 0 10px 5px rgb(0 0 0 / 10%);
        }

        .pdfViewer .page {
            margin: 1px auto 0 auto !important;
        }

        .excel-sheet.original table {
            width: max-content !important;
            font-size: 14px !important;
        }

        .excel-sheet.original td {
            border: 1px dashed #999;
        }

        .excel-sheet.responsive table {
            width: 100% !important;
            border-collapse: separate !important;
            border-spacing: 0 !important;
            border: none;
            text-align: left !important;
            border-radius: 4px 4px 0 0 !important;
            font-size: 14px !important;
            line-height: 1.5 !important;
            color: rgba(0, 0, 0, .65) !important;
            -webkit-box-sizing: border-box !important;
            box-sizing: border-box !important;
            margin: 0 !important;
            padding: 0 !important;
            list-style: none !important;
            position: relative !important;
            clear: both !important;
        }

        .excel-sheet.responsive tbody > tr > td, .excel-sheet.responsive thead > tr > th {
            max-width: 200px;
            white-space: pre-wrap;
            padding: 16px !important;
            word-break: break-word !important;
        }

        .excel-sheet.responsive tbody :first-child > td {
            border: none !important;
            background: #fafafa !important;
            position: relative;
            border-bottom: 1px solid rgba(0, 0, 0, .06) !important;
        }

        body[arco-theme='dark'] .excel-sheet.responsive tbody :first-child > td {
            border: none !important;
            background: #666636 !important;
            position: relative;
            border-bottom: 1px solid rgba(0, 0, 0, .06) !important;
        }

        .excel-sheet.responsive tbody :first-child > td:before {
            position: absolute;
            top: 50%;
            right: 0;
            width: 1px;
            height: 1.6em;
            background-color: #0000000f;
            transform: translateY(-50%);
            transition: background-color .3s;
            content: "";
        }

        .excel-sheet.responsive tbody > tr, tbody > tr > td, .excel-sheet.responsive thead > tr {
            -webkit-transition: all .3s;
            transition: all .3s;
        }

        .excel-sheet.responsive tbody tr:first-of-type td, tbody tr td a {
            white-space: nowrap !important;
        }

        .excel-sheet.responsive tbody > tr > td {
            overflow: visible;
            border: none !important;
            border-bottom: 1px solid #e8e8e8 !important;
            border-right: 1px solid #e8e8e8 !important;
        }

        .excel-sheet.responsive td tbody tr:hover td {
            background: #e6f7ff !important;
        }

        .excel-sheet.responsive td tbody tr:nth-child(1) td {
            background: #fafafa !important;
            height: 44px;
            line-height: 44px;
            font-size: 14px;
        }

        .excel-sheet.responsive tr:nth-child(1):hover td, .datelist tr:nth-child(1):hover td {
            background: none;
        }

        .excel-sheet.responsive {
            border: none;
        }

        .excel-sheet.responsive td {
            border-right: none !important;
        }

        /*
            overload scrollbar style
        */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        ::-webkit-scrollbar-thumb {
            background: #888;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
    </style>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
